<template>
  <div class="application">
    <div class="app_left" :style="{ width: isCollapse ? '64px' : '200px' }">
      <div class="fix_diban" :style="{ width: isCollapse ? '64px' : '200px' }"></div>
      <div class="size_change" :style="{ justifyContent: isCollapse ? 'center' : 'flex-end' }">
        <span
          class="anm_joker"
          :style="{ transform: isCollapse ? 'rotate(90deg)' : 'rotate(0deg)' }"
          @click="isCollapse = !isCollapse"
        >
          <i :style="{ marginRight: isCollapse ? '0' : '20px' }" class="el-icon-s-unfold"></i>
        </span>
      </div>
      <el-menu
        :default-active="$route.name"
        :collapse-transition="true"
        background-color="rgba(81, 90, 110, 1)"
        :unique-opened="true"
        text-color="rgba(255, 255, 255, 0.8)"
        class="el-menu-vertical-demo left_menu"
        :collapse="isCollapse"
      >
        <template v-for="_i in menuList">
          <!-- 单级导航 -->
          <el-menu-item
            @click="router_change(_i)"
            :key="_i.key"
            :index="_i.name"
            v-if="!_i.children || _i.children.length == 0"
          >
            <i :class="_i.icon"></i>
            <span slot="title">{{ _i.txt }}</span>
          </el-menu-item>

          <!-- 具有子级的区域 -->
          <el-submenu :key="_i.key" :index="_i.name" v-if="_i.children && _i.children.length > 0">
            <template slot="title">
              <i :class="_i.icon"></i>
              <span>{{ _i.txt }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                @click="router_change(_is)"
                v-for="_is in _i.children"
                :key="_is.key"
                :index="_is.name"
              >
                <i :class="_is.icon"></i>
                <span class="sec_size" slot="title">{{ _is.txt }}</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </template>
      </el-menu>
    </div>
    <div
      :style="{
        width: isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 200px)'
      }"
      class="app_right"
    >
      <router-view class="router_view"></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "applicationIndex",
  watch: {
    menuList() {}
  },
  data() {
    return {
      isCollapse: true
    };
  },
  computed: {
    menuList() {
      return this.$store.state.application.menuList;
    }
  },
  methods: {
    // 页面导航函数
    router_change(obj) {
      if (!obj.path) {
        this.$message("模块异常，请联系管理员！！！");
        return;
      }
      this.$store.commit("active_menu_application_change", obj.name); //  更改数据分析模块下，当前激活的导航
      this.$router.push("/application/" + obj.path); //  跳转页面
    }
  },
  created() {
    //  更改应用管理模块下当前激活项
    if (!this.$store.state.application.active_menu_application) {
      this.$store.commit("active_menu_application_change", this.$route.name);
    }
  },
  mounted() {}
};
</script>

<style scoped lang="scss">
.router_view {
  width: 100%;
  height: 100%;
}
// 旋转动画用的 过度类名
.anm_joker {
  transition: all 0.5s ease;
}
.application::-webkit-scrollbar {
  display: none;
}
.application {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  top: 60px;
  height: auto;
  //   min-height: 92.6vh;
  background: rgba(238, 238, 238, 1);
  // height: 92.6vh;
  bottom: 0;
  overflow-y: scroll;
  .app_left {
    height: auto;
    display: inline-block;
    min-height: calc(93vh - 4px);
    margin: 0;
    padding: 0;
    .left_menu {
    }
    .size_change {
      cursor: pointer;
      width: 100%;
      margin: 0 auto;
      height: 20px;
      background: rgba(81, 90, 110, 1);
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      text-indent: 10%;
      span {
      }
      i {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.8);
      }
    }
    .el-menu {
      border-right: none;
      background: rgba(81, 90, 110, 1);
      li {
        .sec_size {
          font-size: 12px;
        }
      }
      li:hover {
        //   background: red !important;
        color: rgba(53, 62, 79, 1) !important;
      }
      .is-active {
        background: rgba(53, 62, 79, 1);
        color: #01b27a !important;
      }
      .el-menu-item {
        color: rgba(255, 255, 255, 0.8);
      }
    }
    .el-menu:hover {
      color: red !important;
    }
    background: rgba(53, 62, 79, 1);
    // border-right: 2px solid #f5f5f5;
    .fix_diban {
      position: fixed;
      left: 0;
      top: 120px;
      bottom: 0;
      background: rgba(53, 62, 79, 1);
      display: inline-block;
    }
  }
  .app_right {
    position: absolute;
    // width: calc(100% - 202px);
    top: 0;
    bottom: 0;
    right: 0;
    display: inline-block;
  }
}
</style>
